<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>瀑布式布局</title>
</head>
<style>
    .waterfall {
        column-count: 3;
        column-gap: 0;
    }

    .item {
        box-sizing: border-box;
        break-inside: avoid;
        padding: 10px;
    }

    .item-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        height: auto;
        font-size: 20px;
        color: #686868;
        box-sizing: border-box;
        border: 1px solid #ccc;
    }
</style>

<body>
    <div class="waterfall">
        <div class="item">
            <div class="item-content">
                1.三月到大理赏樱花不远不近
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                4.三月到大理赏樱花不远不近
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
                三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
                三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
                三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                7.三月到大理赏樱花不远不近,又近又远
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                9.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                9.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆
            </div>
        </div>
    </div>
</body>

</html>